<!--上拉刷新，下拉加载  -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css">
<!--上拉刷新，下拉加载  -->
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
<!-- 搜索框 -->
<div class="mui-input-row mui-search" style="position: sticky;left: 0; top: 0;z-index: 99;background-color: white;">
    <input type="search" class="mui-input-clear" placeholder="请输入评价内容" name="search" id="keywords"
        style="margin-bottom: 0px;" />
</div>
<!-- 评论内容 -->
<div class="mescroll" id="mescroll">
    <ul class="mui-table-view">


    </ul>
</div>
<script>
    
    var mescroll = new MeScroll("mescroll", {
        down: {
            callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            auto: false,
            callback: upCallback, //上拉加载的回调
            page: {
                size: 2 //每页数据条数,默认10
            },
        }
    }
    )
    function downCallback() {
        // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
        mescroll.resetUpScroll()

        $(".mui-table-view").html('')

    }
    // 回车搜索
    $(document).keydown(function (e) {
        if (e.keyCode == 13) {
            search = $("#keywords").val()
            downCallback()
        }
    })
    async function upCallback(val) {
        page = val.num; // 页码, 默认从1开始 如何修改从0开始 ?
        size = val.size;
        let search = $('#keywords').val()
        let data = {
            page: page,
            limit: size,
            keywords: search,
            subid:`{$subid}`
        }
        $.ajax({
            type: 'post',
            url: `{:url('home/subject/commentList')}`,
            dataType: 'json',
            data: data,
            success: function (result) {
                if (result.code == 0) {
                    mui.toast(result.msg)
                    mescroll.endBySize(0, 0);
                    return false;
                }
                mescroll.endBySize(result.data.list.length, result.data.count);
                ListEvent(result.data.list, result.data.commentList)
            }
        })

    }
    function ListEvent(list, commentList) {
        list.forEach(item => {
            var t =
                `
                    <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left userimg" src="${item.business.avatar}">
                    <div class="mui-media-body">
                        ${item.business.nickname}
                        <p class='mui-ellipsis'>${item.content}</p>
                        <span style=" display: block;width: 100%;text-align: right;">${item.createtime}</span>
                    </div>
                </a>
            </li>
                `;
            $('.mui-table-view').append(t)
        });
    }
</script>